<template>
	<z-paging-swiper class="page">
		<CustomNavBar class="navbar fixed-top" title="服务订单">
			<template v-slot:left><uni-icons type="left" size="20" @click="goBack"></uni-icons></template>
		</CustomNavBar>
		<view class="uni-padding-wrap uni-common-mt">
			<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
				value-key="id" :active-style="{'font-size':'30rpx','font-weight':'600','color': '#333333'}"
				:inactive-style="{'font-size':'30rpx','color': '#666666','font-weight':'400'}" />
		</view>
		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<!-- 修改这里：为每个swiper-item添加独立的滚动容器 -->
				<scroll-view class="content-scroll" scroll-y="true">
					<view class="content-box">
						<ServiceAllOrderVue v-if="index === 0" :orderList="allOrderList"
							@refreshOrderList="fetchCurrentOrderList" />
						<ServiceOrderCompleted v-if="index === 1" />
						<ServiceCalendar v-if="index === 2" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted
	} from "vue";
	import ServiceAllOrderVue from './ServiceAllOrder.vue'
	import ServiceOrderCompleted from './ServiceOrderCompleted.vue'
	import ServiceCalendar from './ServiceCalendar.vue'
	import CustomNavBar from "@/components/custom-navbar/index.vue";

	import {
		ServiceOrderList
	} from '@/api/serviceOrder.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	const tabsRef = ref(null);
	const listItem = ref(null);

	const state = reactive({
		tabsList: [{
				id: 0,
				name: '全部订单'
			},
			{
				id: 1,
				name: '已完成'
			},
			{
				id: 2,
				name: '服务日历'
			}
		],
		currentIndex: 0,
		currentId: 0,
	});

	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);
	const allOrderList = ref([]);

	// 状态映射
	const statusMap = [1, null, 3];

	// 新增：用于存储页面参数
	const pageParams = ref({});

	// 新增：接收页面参数
	onLoad((options) => {
		pageParams.value = options;
		// 如果从日历按钮进入，默认选中第三个标签
		if (options.from === 'calendar') {
			state.currentIndex = 2;
			state.currentId = 2;
		}
	});

	// 初始加载全部订单
	onShow(() => {
		fetchOrderList(statusMap[0])
	})
	onMounted(() => {
		fetchOrderList(statusMap[2])

	})

	// 刷新当前选项卡的订单
	const fetchCurrentOrderList = () => {
		const status = statusMap[currentIndex.value];
		if (status) {
			fetchOrderList(status);
		}
	}

	// 接口请求方法
	const fetchOrderList = async (status) => {
		try {
			if (status === 1) {
				const params = {
					status
				};
				const res = await ServiceOrderList(params);
				allOrderList.value = res.data || [];
			}
		} catch (error) {
			console.error('获取数据失败', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};

	const changeTab = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
		fetchCurrentOrderList(); // 切换时加载对应数据
	};

	const onChange = (e) => {
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
	};

	// swiper滑动中
	const swiperTransition = (e) => {
		tabsRef.value.setDx(e.detail.dx);
	};

	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
		tabsRef.value.unlockDx();
	};

	// 如果要通知当前展示的z-paging刷新，请调用此方法
	const reloadCurrentList = () => {
		listItem.value[currentIndex.value]?.reload();
	};
	const goBack = (() => {
		uni.navigateBack()
	})
</script>

<style lang="scss" scoped>
	.page {
		/* 关键：让整个页面容器占满屏幕 */
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		/* 避免外层多余滚动 */

		.uni-common-mt {
			margin-top: 10px;
			background-color: #fff;
		}

		.swiper {
			/* 关键：swiper高度设为屏幕剩余高度（减去tabs高度） */
			height: calc(100vh - 100rpx);
			/* 假设tabs高度为100rpx，根据实际调整 */
			background-color: #f5f5f5;
		}

		.content-scroll {
			height: 100%;
			/* 继承swiper高度 */
		}

		.content-box {
			min-height: 100%;
			/* 确保内容足够高 */
			padding-bottom: 200rpx;
			/* 底部留白 */
			background-color: #f5f5f5;
		}

		::v-deep .z-tabs-list {
			width: 100% !important;
			justify-content: space-evenly !important;
		}
	}
</style>